<template>
	<view class="">
		<view class="tab_nav">
			<nav-bar
				nav_btn="back"
				:index="index"
				:title="title"
				@onPicker="onPicker"
				:showPicker="showPicker"
				:color="color"
				:placeholder="placeholder"
				:list="list"
				:auto_img="image"
				:background="background"
			></nav-bar>
		</view>
		<view class="" style="position: fixed; width: 100%; background: #fff; z-index: 9">
			<!-- 搜索 -->
			<view class="" style="background: #fff; padding: 56rpx 0 34rpx 0">
				<view class="flex align-center" style="margin: 0 32rpx 0 32rpx; background: #f3f3f3; border-radius: 8rpx; padding: 14rpx 24rpx">
					<view class="" style="font-size: 0; margin-right: 14rpx">
						<image style="width: 40rpx; height: 40rpx" src="./static/10.png"></image>
					</view>
					<input @input="search" class="flex-1" type="text" v-model="keyWords" placeholder="电话/昵称搜索" />
				</view>
			</view>
			<view class="flex justify-between" style="background: #fff; padding: 27rpx 32rpx; border-top: 2rpx solid #f4f5f9">
				<view class="" style="font-size: 24rpx; font-weight: 700; color: #333333">
					{{ userList.shop.shopname }}
				</view>
				<view class="flex align-center">
					<view class="" style="font-size: 24rpx; font-weight: 700; color: #333333">
						（
						<span style="color: #c8904c">{{ userList.shop.on_num }}</span>
						/{{ userList.shop.worker_num }}）
					</view>
					<view class="" style="font-size: 0; position: relative">
						<view
							v-if="isOpen"
							class=""
							style="
								padding: 12rpx 20rpx;
								background: #ffffff;
								box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
								border-radius: 20rpx 20rpx 0rpx 20rpx;
								position: absolute;
								bottom: 40rpx;
								right: 16rpx;
								min-width: 250rpx;
							"
						>
							<view class="" style="font-size: 24rpx; font-weight: 700; color: #333333">
								员工人数:
								<span style="color: #c8904c">{{ userList.shop.on_num }}</span>
								人、
							</view>
							<view class="" style="font-size: 24rpx; font-weight: 700; color: #333333">使用人数上限:{{ userList.shop.worker_num }}人</view>
						</view>
						<image @click="isOpen = !isOpen" style="width: 28rpx; height: 28rpx" src="./static/17.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 占位置 -->
		<view class="" style="opacity: 0">
			<!-- 搜索 -->
			<view class="" style="background: #fff; padding: 56rpx 0 34rpx 0">
				<view class="flex align-center" style="margin: 0 32rpx 0 32rpx; background: #f3f3f3; border-radius: 8rpx; padding: 14rpx 24rpx">
					<view class="" style="font-size: 0; margin-right: 14rpx">
						<image style="width: 40rpx; height: 40rpx" src=""></image>
					</view>
					<input class="flex-1" type="text" />
				</view>
			</view>
			<view class="flex justify-between" style="background: #fff; padding: 27rpx 32rpx; border-top: 2rpx solid #f4f5f9">
				<view class="" style="font-size: 24rpx; font-weight: 700; color: #333333">啊</view>
				<view class="flex align-center">
					<view class="" style="font-size: 24rpx; font-weight: 700; color: #333333">
						（
						<span style="color: #c8904c">0</span>
						/0）
					</view>
					<view class="" style="font-size: 0; position: relative">
						<image style="width: 28rpx; height: 28rpx" src="./static/17.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 在职员工 -->
		<view class="" style="padding: 32rpx 32rpx 20rpx 32rpx; font-size: 24rpx; font-weight: 700; color: #666666">在职员工</view>
		<view class="flex" v-for="(item, index) in userList.on" :key="index" style="background: #fff; padding: 24rpx 32rpx; margin-bottom: 6rpx">
			<view class="" style="font-size: 0; margin-right: 24rpx; position: relative">
				<image style="width: 120rpx; height: 120rpx; border-radius: 16rpx" :src="item.avatar"></image>
				<view
					v-if="item.is_main == 1"
					style="
						width: 50rpx;
						height: 30rpx;
						background-color: #844902;
						position: absolute;
						bottom: 0;
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						color: #fff;
						line-height: 30rpx;
						text-align: center;
						font-size: 24rpx;
					"
				>
					主
				</view>
				<view
					v-if="item.is_main == 0"
					style="
						width: 50rpx;
						height: 30rpx;
						background-color: #eb8787;
						position: absolute;
						bottom: 0;
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						color: #fff;
						line-height: 30rpx;
						text-align: center;
						font-size: 24rpx;
					"
				>
					兼
				</view>
			</view>
			<view class="flex flex-clum justify-between flex-1" style="height: 120rpx">
				<view class="flex align-center justify-between">
					<view class="flex-1 flex" style="padding-top: 10rpx">
						<view
							style="font-size: 30rpx; font-weight: 700; color: #333333; margin-right: 14rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200rpx"
						>
							{{ item.name ? item.name : item.shop_user_name }}
							<!-- {{item.shop_user_name}} -->
						</view>
						<view class="flex align-center" style="font-size: 22rpx; color: #666666; margin-left: 14rpx">
							<view class="">商家{{ item.now_iden == 1 ? '职员' : item.now_iden == 2 ? '管理' : '' }}</view>
							<view v-if="item.work" class="" style="width: 2rpx; height: 18rpx; background: #cccccc; margin: 0 10rpx"></view>
							<view v-if="item.work" class="">
								{{ item.work }}
							</view>
							<view class="" style="width: 2rpx; height: 18rpx; background: #cccccc; margin: 0 10rpx"></view>
							<view class="">
								{{ item.on_line == 0 ? '无权限' : item.on_line == 1 ? '有权限' : '' }}
							</view>
						</view>
					</view>
					<view class="flex align-end">
						<view class="" @click="changeSwitch(item, index)" style="font-size: 0; margin-right: 22rpx">
							<image v-if="item.no_money == 1" style="width: 68rpx; height: 40rpx" src="./static/18.png"></image>
							<image v-else style="width: 68rpx; height: 40rpx" src="./static/19.png"></image>
						</view>
						<view class="" style="font-size: 0; position: relative">
							<view
								v-if="item.isOpen"
								class=""
								style="
									padding: 12rpx 20rpx;
									background: #ffffff;
									box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
									border-radius: 20rpx 20rpx 0rpx 20rpx;
									position: absolute;
									bottom: 44rpx;
									right: 0rpx;
									min-width: 360rpx;
									font-size: 24rpx;
									font-weight: 700;
									color: #333333;
								"
							>
								允许自家员工分享同行业店铺商品获得佣金
							</view>
							<image @click="changeIsOpen(index)" style="width: 28rpx; height: 28rpx" src="./static/17.png"></image>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between">
					<view class="flex align-center" style="padding-top: 6rpx">
						<view class="" style="font-size: 26rpx; color: #999999; margin-right: 12rpx">
							{{ item.mobile }}
						</view>
						<view class="" @click="call(item.mobile)" style="font-size: 0">
							<image style="width: 36rpx; height: 36rpx" src="./static/13.png"></image>
						</view>
					</view>
					<view class="flex align-center" style="font-size: 24rpx; color: #b0b0b0">
						<view @click="goEdit(item)" class="flex align-center justify-center" style="width: 88rpx; height: 42rpx; border-radius: 4rpx; border: 2rpx solid #b0b0b0">修改</view>
						<view
							@click="quit(item, index)"
							class="flex align-center justify-center"
							style="width: 88rpx; height: 42rpx; background: #c2514a; border-radius: 4rpx; margin-left: 24rpx; color: #ffffff"
						>
							离职
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 待确认 -->
		<view class="" style="padding: 32rpx 32rpx 20rpx 32rpx; font-size: 24rpx; font-weight: 700; color: #666666">待确认</view>
		<view class="flex" v-for="(item, index) in userList.sure" :key="index" style="background: #fff; padding: 24rpx 32rpx; margin-bottom: 6rpx">
			<view class="" style="font-size: 0; margin-right: 24rpx">
				<image style="width: 120rpx; height: 120rpx; border-radius: 16rpx" :src="item.avatar"></image>
			</view>
			<view class="flex flex-clum justify-between flex-1" style="height: 120rpx">
				<view class="flex align-end justify-between">
					<view class="flex-1 flex align-end" style="padding-top: 10rpx">
						<view class="flex-1" style="font-size: 30rpx; font-weight: 700; color: #333333; margin-right: 14rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
							{{ item.name }}
							<!-- {{item.shop_user_name}} -->
						</view>
						<view class="flex align-center" style="font-size: 22rpx; color: #666666; margin-left: 14rpx">
							<view class="">商家{{ item.now_iden == 1 ? '职员' : item.now_iden == 2 ? '管理' : '' }}</view>
							<view v-if="item.work" class="" style="width: 2rpx; height: 18rpx; background: #cccccc; margin: 0 10rpx"></view>
							<view v-if="item.work" class="">
								{{ item.work }}
							</view>
							<view class="" style="width: 2rpx; height: 18rpx; background: #cccccc; margin: 0 10rpx"></view>
							<view class="">
								{{ item.on_line == 0 ? '无权限' : item.on_line == 1 ? '有权限' : '' }}
							</view>
						</view>
					</view>
					<view class="flex align-end" style="font-size: 22rpx; font-weight: 700; color: #c7904c">等待成员确认中···</view>
				</view>
				<view class="flex align-center justify-between">
					<view class="flex align-center" style="padding-top: 6rpx">
						<view class="" style="font-size: 26rpx; color: #999999; margin-right: 12rpx">
							{{ item.mobile }}
						</view>
						<view class="" @click="call(item.mobile)" style="font-size: 0">
							<image style="width: 36rpx; height: 36rpx" src="./static/13.png"></image>
						</view>
					</view>
					<view class="flex align-center" style="font-size: 24rpx; color: #b0b0b0">
						<view
							@click="del(item, index)"
							class="flex align-center justify-center"
							style="width: 88rpx; height: 42rpx; background: #9e9e9e; border-radius: 4rpx; font-size: 24rpx; color: #ffffff"
						>
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 已离职 -->
		<view class="" style="padding: 32rpx 32rpx 20rpx 32rpx; font-size: 24rpx; font-weight: 700; color: #666666">已离职</view>
		<view class="flex" v-for="(item, index) in userList.out" :key="index" style="background: #fff; padding: 24rpx 32rpx; margin-bottom: 6rpx">
			<view class="" style="font-size: 0; margin-right: 24rpx">
				<image style="width: 120rpx; height: 120rpx; border-radius: 16rpx" :src="item.avatar"></image>
			</view>
			<view class="flex flex-clum justify-between flex-1" style="height: 120rpx">
				<view class="flex align-end justify-between">
					<view class="flex-1 flex align-end" style="padding-top: 10rpx">
						<view style="font-size: 30rpx; font-weight: 700; color: #333333; margin-right: 14rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
							{{ item.name }}
							<!-- {{item.shop_user_name}} -->
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between">
					<view class="flex align-center" style="padding-top: 6rpx">
						<view class="" style="font-size: 26rpx; color: #999999; margin-right: 12rpx">
							{{ item.mobile }}
						</view>
						<view class="" @click="call(item.mobile)" style="font-size: 0">
							<image style="width: 36rpx; height: 36rpx" src="./static/13.png"></image>
						</view>
					</view>
					<view class="flex align-center" style="font-size: 24rpx; color: #b0b0b0">
						<view
							@click="del(item, index)"
							class="flex align-center justify-center"
							style="width: 88rpx; height: 42rpx; background: #9e9e9e; border-radius: 4rpx; font-size: 24rpx; color: #ffffff"
						>
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" @click="goAdd" style="font-size: 0; position: fixed; bottom: 240rpx; right: 32rpx">
			<image style="width: 136rpx; height: 136rpx" src="./static/20.png"></image>
		</view>
		<view class="" style="height: 376rpx"></view>
		<!-- 删除确认弹窗 -->
		<uni-popup ref="del" type="center">
			<view class="tips2">
				<view class="title">温馨提示</view>
				<view class="content">是否确认删除该员工</view>
				<view class="btn-group">
					<view class="btn cancel" @click="cancelDel"> 取消 </view>
					<view class="btn confirm" @click="confirmDel"> 确定 </view>
				</view>
			</view>
		</uni-popup>
		<!-- 离职确认弹窗 -->
		<uni-popup ref="quit" type="center">
			<view class="tips2">
				<view class="title">温馨提示</view>
				<view class="content">
					是否确认该员工离职，离职后该员工的平台合伙人与店铺合伙人不会随着离职人员转移给其他员工，但您仍然可以在店铺合伙人管理中维护此员工名下的店铺合伙人
				</view>
				<view class="btn-group">
					<view class="btn cancel" @click="cancelQuit"> 取消 </view>
					<view class="btn confirm" @click="confirmQuit"> 确定 </view>
				</view>
			</view>
		</uni-popup>
		<!-- 添加员工提示 -->
		<uni-popup ref="tips" type="center">
			<view class="dialog-container">
				<view class="title">温馨提示</view>
				<view class="content">您的店铺员工人数已达上限，请联系平台管理员增加店铺人数！</view>
				<view class="btn-group">
					<view class="btn confirm" @click="$refs.tips.close()">我知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			image: '../static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#ffffff',
			list: [
				{
					shopname: '请选择店铺'
				}
			],
			shopId: 4,
			index: 0,
			keyWords: '',
			isOpen: false,
			userList: {}, //员工管理列表
			item: 0
		};
	},
	onLoad(options) {
		let obj = JSON.parse(options.obj);
		this.shopId = obj.shopId;
		this.index = obj.index;
		this.getShopList();
	},
	onShow() {
		this.getShopUser();
	},
	methods: {
		//点击加号
		goAdd() {
			const { on_num, worker_num } = this.userList.shop;
			if (worker_num != 1) {
				if (on_num + this.userList.sure.length >= worker_num) {
					return this.$refs.tips.open();
				}
			} else {
				if (on_num == 1) {
					if (this.userList.sure.length > 0) {
						return this.$refs.tips.open();
					}
				}
			}
			uni.navigateTo({
				url: '/pages/schedule/addEmployee?shopId=' + this.shopId
			});
		},
		//去修改
		goEdit(item) {
			if (item.id == uni.getStorageSync('userInfo').id) {
				uni.showToast({
					title: '不能操作自己的信息',
					icon: 'none'
				});
				return;
			}
			item.shopId = this.shopId;
			uni.navigateTo({
				url: '/pages/schedule/editEmployee?obj=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		//点击删除
		del(item, index) {
			if (item.id == uni.getStorageSync('userInfo').id) {
				uni.showToast({
					title: '不能操作自己的信息',
					icon: 'none'
				});
				return;
			}
			this.item = item;
			this.$refs.del.open();
		},
		//确认删除
		confirmDel() {
			this.$request({
				url: 'Shopuser/user_del',
				method: 'POST',
				data: {
					id: this.item.use_id,
					type: 0,
					to_user_id: 0
				}
			}).then((res) => {
				if (res.data.code == 1) {
					this.getShopUser();
					this.$refs.del.close();
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		cancelDel() {
			this.$refs.del.close();
		},
		//点击离职
		quit(item, index) {
			if (item.id == uni.getStorageSync('userInfo').id) {
				uni.showToast({
					title: '不能操作自己的信息',
					icon: 'none'
				});
				return;
			}
			this.item = item;
			this.$refs.quit.open();
		},
		//确认离职
		confirmQuit() {
			if (this.item.have_people == 1) {
				// 需要交接
				uni.navigateTo({
					url: `/pages/schedule/quit?use_id=${this.item.use_id}&shopId=${this.shopId}&user_id=${this.item.id}`
				});
				this.$refs.quit.close();
				return;
			}
			this.$request({
				url: 'Shopuser/user_del',
				method: 'POST',
				data: {
					id: this.item.use_id,
					type: 1
				}
			}).then((res) => {
				if (res.data.code == 1) {
					this.getShopUser();
					this.$refs.quit.close();
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		cancelQuit() {
			this.$refs.quit.close();
		},
		// 搜索
		search() {
			this.getShopUser();
		},
		//开启关闭分享获利
		changeSwitch(item, index) {
			this.$request({
				url: 'Shopuser/user_status',
				method: 'POST',
				data: {
					user_id: item.id,
					shop_id: this.shopId
				}
			}).then((res) => {
				if (res.data.code == 1) {
					this.getShopUser();
				}
			});
		},
		changeIsOpen(index) {
			this.userList.on[index].isOpen = !this.userList.on[index].isOpen;
		},
		//拨打电话
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e,
				success: (res) => {},
				fail: (res) => {}
			});
		},
		//获取店铺列表
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.list = res.data.data;
			});
		},
		//获取员工管理列表
		getShopUser() {
			this.$request({
				url: 'Shopuser/user_list',
				method: 'POST',
				data: {
					keyword: this.keyWords,
					shop_id: this.shopId
				}
			}).then((res) => {
				for (let i = 0; i < res.data.data.on.length; i++) {
					res.data.data.on[i].isOpen = false;
				}
				this.userList = res.data.data;
			});
		},
		// 选择店铺
		onPicker(e) {
			this.shopId = this.list[e].id;
			this.index = e;
			this.getShopUser();
		}
	}
};
</script>
<style>
page {
	background: #f4f5f9;
}
</style>
<style scoped lang="scss">
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.flex-clum {
	flex-direction: column;
}
.align-center {
	align-items: center;
}
.align-end {
	align-items: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}

.dialog-container {
	width: 600rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 32rpx;
	box-sizing: border-box;
	.title {
		padding-top: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		line-height: 50rpx;
	}
	.content {
		padding: 32rpx;
		text-align: center;
		font-size: 30rpx;
		color: #666;
		line-height: 42rpx;
	}
	.btn-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 32rpx;
		.btn:only-child {
			width: 100%;
		}
	}
	.btn {
		width: 260rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.confirm {
		background: #ebbe87;
		color: #fff;
	}
	.cancel {
		background: #f3f3f3;
		color: #333;
	}
}
.tips2 {
	width: 600rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 32rpx;
	box-sizing: border-box;
	.title {
		padding-top: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		line-height: 50rpx;
	}
	.content {
		padding-top: 32rpx;
		text-align: center;
		font-size: 30rpx;
		color: #666;
		line-height: 42rpx;
	}
	.btn-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 66rpx;
	}
	.btn {
		width: 260rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.cancel {
		background: #f3f3f3;
		color: #333;
	}
	.confirm {
		background: #ebbe87;
		color: #fff;
	}
}
</style>
